<template>
  <base-layout>
    <div class="course-manage">
      <div class="page-header">
        <h2>课程管理</h2>
        <div class="header-actions">
          <a-button type="primary" @click="handleAddCourse">
            <template #icon><plus-outlined /></template>
            新增课程
          </a-button>
        </div>
      </div>

      <div class="search-area">
        <a-input-search
          v-model:value="searchText"
          placeholder="搜索课程名称"
          style="width: 300px"
          @search="onSearch"
        />
        <a-select
          v-model:value="filterStatus"
          style="width: 120px"
          placeholder="课程状态"
        >
          <a-select-option value="">全部状态</a-select-option>
          <a-select-option value="active">进行中</a-select-option>
          <a-select-option value="ended">已结束</a-select-option>
          <a-select-option value="upcoming">未开始</a-select-option>
        </a-select>
      </div>

      <a-table
        :columns="columns"
        :data-source="courseList"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" @click="handleEdit(record)">
                <template #icon><edit-outlined /></template>
                编辑
              </a-button>
              <a-divider type="vertical" />
              <a-button type="link" @click="handleView(record)">
                <template #icon><eye-outlined /></template>
                查看
              </a-button>
              <a-divider type="vertical" />
              <a-popconfirm
                title="确定要删除这门课程吗？"
                @confirm="handleDelete(record)"
                ok-text="确定"
                cancel-text="取消"
              >
                <a-button type="link" danger>
                  <template #icon><delete-outlined /></template>
                  删除
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
  </base-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { 
  PlusOutlined,
  EditOutlined,
  EyeOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'
import BaseLayout from '@/components/layout/BaseLayout.vue'
import { courseApi } from '@/api'

const router = useRouter()
const searchText = ref('')
const filterStatus = ref('')
const loading = ref(false)
const courseList = ref([])

const columns = [
  {
    title: '课程名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '课程代码',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '开课时间',
    dataIndex: 'startTime',
    key: 'startTime',
  },
  {
    title: '结课时间',
    dataIndex: 'endTime',
    key: 'endTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 200,
  },
]

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: (total) => `共 ${total} 条记录`,
})

// 获取状态颜色
const getStatusColor = (status) => {
  const colors = {
    active: 'green',
    ended: 'gray',
    upcoming: 'blue',
  }
  return colors[status] || 'default'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    active: '进行中',
    ended: '已结束',
    upcoming: '未开始',
  }
  return texts[status] || status
}

// 加载课程列表
const loadCourseList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.value.current,
      pageSize: pagination.value.pageSize,
      keyword: searchText.value,
      status: filterStatus.value,
      type: filterType.value
    }
    const res = await courseApi.getCourseList(params)
    courseList.value = res.data.list
    pagination.value.total = res.data.total
  } catch (error) {
    message.error('加载课程列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const onSearch = () => {
  pagination.value.current = 1
  loadCourseList()
}

// 表格变化处理
const handleTableChange = (pag) => {
  pagination.value.current = pag.current
  pagination.value.pageSize = pag.pageSize
  loadCourseList()
}

// 新增课程
const handleAddCourse = () => {
  console.log('跳转到新增课程页面')
  router.push({ path: '/course-create' })
}

// 编辑课程
const handleEdit = (record) => {
  console.log('跳转到编辑课程页面:', record.id)
  router.push({ path: `/course-edit/${record.id}` })
}

// 查看课程
const handleView = (record) => {
  console.log('跳转到课程详情页面:', record.id)
  router.push({ path: `/course-detail/${record.id}` })
}

// 删除课程
const handleDelete = async (record) => {
  try {
    await courseApi.deleteCourse(record.id)
    message.success('删除成功')
    loadCourseList()
  } catch (error) {
    message.error('删除失败')
  }
}

onMounted(() => {
  loadCourseList()
})
</script>

<style scoped>
.course-manage {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background: #fff;
  padding: 16px 24px;
  border-radius: 2px;
}

.page-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  gap: 16px;
}

.search-area {
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
  background: #fff;
  padding: 16px 24px;
  border-radius: 2px;
}

:deep(.ant-table-wrapper) {
  background: #fff;
  padding: 24px;
  border-radius: 2px;
}

:deep(.ant-table-pagination) {
  margin: 16px 0 0 0;
}

.danger-link {
  color: #ff4d4f;
}

.danger-link:hover {
  color: #ff7875;
}
</style> 